<template>
    <div class="box">
        <public-head :title="examinationTitle" :hasSearch="hasSearch"></public-head>
        <van-tabs  v-model="active" color = "#198AFF" line-width="20px"
            title-active-color = "#198AFF" title-inactive-color="#999"
            >
            <van-tab title="未完成">
                <div class="content" v-for="(item,index) in incomplete" :key="index.id">
                    <p>发布时间：{{item.date}}</p>
                    <p>考试题目：{{item.title}}</p>
                    <p>考试时间：90分钟 <span class="exam" @click="exam()">我要考试</span></p>
                </div>
            </van-tab>
            <van-tab title="已完成">
                <div class="content" v-for="(item ,index) in complete" :key="index.id">
                    <p>发布时间：{{item.date}}</p>
                    <p>考试题目：{{item.title}}</p>
                    <p> 总题：{{item.questions}}题  &nbsp;&nbsp;&nbsp;已做：{{item.done}}题<span class="fraction" @click="done()">查看分数</span></p>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
import PublicHead  from '../../../components/PublicHead'
export default {
    name:"kaoshi",
    components:{
        PublicHead
    },
    data() {
        return {
            examinationTitle:"在线考试",
            active:0,
            incomplete:[
                {date:'2020-10-09',title:"风险管理"},
                {date:'2020-03-23',title:"风险管理"},
                {date:'2020-12-23',title:"风险管理"},
            ],
            complete:[
                {date:'2020-10-09',title:"风险管理",questions:"10",done:"10"},
                {date:'2020-03-23',title:"风险管理",questions:"10",done:"9"},
                {date:'2020-12-23',title:"风险管理",questions:"10",done:"7"},
            ],
            hasSearch:true
        }
    },
    methods: {
        exam(){
            this.$router.push({path:"/myexam"})
        },
        done(){
            this.$router.push({path:"/mydone"})
        }
    },
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped  >
.box{
    height 100vh
    .content{
        width 345px
        margin 10px 0 0 15px
        background-color #fff
        border-radius 5px
        color #999999
        font-size 13px
        line-height 35px
        p{
            margin-left 10px
        }
        p:nth-child(2){
            font-size 15.5px
            color #333333
        }
        p:nth-child(3){
            display flex
            justify-content space-between
            span{
                background-color #FFA917
                line-height 30px
                color #fff
                width 80px
                text-align center
                border-radius: 20px 0px 0px 20px;
                margin-bottom 10px
            }
            .fraction{
            background-color #1ADFAB
        }
        }
    }
}
</style>